<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div class="app-container" v-loading="loading">

        <ud-card>
            <div style="display: flex;align-items: center;justify-content: space-between;">
                <div style="display: flex;align-items: center;">
                    <h2 style="margin: 0 20px 0 0;">数据统计概览</h2>
                </div>
                <div>
                    <el-button size="small" icon="el-icon-refresh" @click="fetchData">刷新</el-button>
                    <el-button  :loading="btnloading" type="primary" size="small" icon="el-icon-download" @click="exportData">导出</el-button>
                </div>
            </div>
            <el-divider />
            <div class="datas">
                <div v-for="(item, i) in homeData" :key="i" class="data-item">
                    <div>{{ item.label }}</div>
                    <div class="data-value">{{ item.value }}</div>
                </div>
            </div>
            <userChart @loadChange="loadChange"></userChart>
        </ud-card>


    </div>
</template>

<script>
import UdCard from "@/components/UdCard";
import { getDataCount, getUserChart, exportDataCount } from "@/api/home";
import userChart from './userChart.vue';
export default {
    components: { UdCard, userChart },
    computed: {

    },
    data() {
        return {
            homeData: [],
            loading: false,
            btnloading: false,
        };
    },
    created() {
        this.fetchData();
    },

    methods: {
        exportData() {
            this.btnloading = true;
            exportDataCount().then((res) => {

                const blob = new Blob([res], {
                    type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
                });

                // 创建一个a标签
                const link = document.createElement("a");
                link.href = URL.createObjectURL(blob); // 设置文件的URL
                link.download = "统计数据.xlsx"; // 设置文件的下载名称

                // 模拟用户点击链接进行下载
                link.click();
                this.btnloading = false;

                // 释放URL对象
                URL.revokeObjectURL(link.href);
            });
        },
        loadChange(e) {
            this.loading = e;
        },
        fetchData() {
            this.loading = true;
            getDataCount().then((resp) => {
                this.loading = false;
                if (resp.status != 0) {
                    return;
                }
                this.homeData = resp.data.counters;
            });
        },
    },
};
</script>

<style scoped>
.myform {
    margin-left: 20px;
}

.myform label {
    color: #99a9bf;
}

.counter-list {
    display: flex;
    flex-direction: flex-start;
}

.counter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 200px;
    height: 100px;
    padding: 15px;
    border-radius: 4px;
    margin-right: 20px;
}

.counter::after {
    content: "/";
}

.counter .value {
    font-weight: bold;
    font-size: 32px;
}

.secret-key {
    position: relative;
}

.el-icon-view,
.el-icon-refresh {
    /* position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    cursor: pointer; */
    margin-left: 10px;
}

.datas {
    display: flex;
    flex-wrap: wrap;
}

.data-item {
    background: linear-gradient(to right, #69a9fd, #466dfb);
    width: 200px;
    height: 80px;
    border-radius: 10px;
    color: #fff;
    padding: 15px;
    margin: 0 30px 30px 0;
}

.data-value {
    font-size: 36px;
    font-weight: bold;
}
</style>